let form = layui.form;

// 实现修改文章

// 关于id的处理
// 通过 location.search，可以获取到地址中的查询字符串的结果

// 获取id值
let id = location.search.split("?id=")[1]

// 富文本编辑器的代码
const E = window.wangEditor
const editor = new E("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 1
editor.create()

// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}


// 获取分类列表数据 ==> 填充到分类的下拉框中
axios.get('/my/article/cates').then(({ data: { data } }) => {
    // console.log(res);

    let newArr = data.map(({ Id, name }) => `<option value="${Id}">${name}</option>`).join('')
    // console.log(newArr);


    // 把option内容放到下拉框中 html() 方法可以使用，但是在这使用的话，会把原本的内容给覆盖掉，可以使用append方法进行添加(不会有覆盖问题)
    $('[name="cate_id"]').append(newArr)
    // $('[name="cate_id"]').html('<option value="">所有分类</option>' + newArr)

    // 渲染全部(layui方法)
    form.render()

    // 发送axios请求，获取对应文章详细
    axios.get(`/my/article/${id}`).then(({ data: { data, status, message } }) => {
        // console.log(res);

        //给表单赋值
        form.val("form", data);

        // 使用 editor.txt.html() 设置编辑器内容
        editor.txt.html(data.content)


        // http://api-breakingnews-web.itheima.net
        // 3. 初始化裁剪区域
        let imgStr = `http://api-breakingnews-web.itheima.net${data.cover_img}`
        $image.attr('src', imgStr).cropper(options)


    })
})

// 点击选择封面，弹出框，用户选择文件
$('#btnChooseCoverImage').on('click', function () {
    $('#fileCover').click()
})


// 给文件域注册change事件，更换裁剪区域的图片
$("#fileCover").on('change', function () {
    // 获取用户选择的文件
    let file = this.files[0]

    if (!file) {
        return layui.msg('请选择图片')
    }

    // 将文件对象转成地址
    let imgSrc = URL.createObjectURL(file)

    // 3. 更换剪裁区的图片的src属性
    $image
        .cropper('destroy')
        .attr('src', imgSrc)
        .cropper(options);
})

// 决定文章的状态时已发布，还是草稿
let state
$('#btnPublish').on('click', function () {
    state = '已发布'
})

$('#btnSave').on('click', function () {
    state = '草稿'
})

// 获取表单数据，axios提交数据
$('#form').on('submit', function (e) {
    e.preventDefault()

    // 收集数据 ==> 接口要求的是 FormData格式数据
    let fd = new FormData(this)

    // 对于FormData收集不到的数据，可以用append方法进行追加
    fd.append('content', editor.txt.html())

    // 收集文章的状态
    fd.append('state', state)

    // 收集文章id
    fd.append('Id' , id)

    // 不是必备代码 ==> 做个检测
    // fd.forEach((value,name) => console.log(value, name)) //这里forEach不是数组的方法是 FormData内置方法

    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

            fd.append('cover_img', blob)

            // 在这发送axios请求 ==> 才把数据完整的收集到
            axios.post('/my/article/edit', fd).then(({ data: { status, message } }) => {
                if (status !== 0) {
                    // 更新文章失败
                    return layer.msg(message)
                }

                // 更新文章成功
                layer.msg(message, {
                    time: 1500 //1.5秒关闭（如果不配置，默认是3秒）
                }, function () {
                    //do something
                    // 关闭后想做些什么
                    // 跳转页面
                    location.href = '/article/art_list.html'
                });
            })

            // 做个检测
            // fd.forEach((value,name) => console.log(value, name))

        })
}) 